<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>知识管理页面</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    <!--    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- CSS Files -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.0 " rel="stylesheet" />
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="../assets/css/demo.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>

<body>
<div class="wrapper">
    <div class="sidebar" data-image="../assets/img/sidebar-5.jpg">
        <!--
    Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"

    Tip 2: you can also add an image using data-image tag
-->
        <div class="sidebar-wrapper">
            <div class="logo">
                <a href="http://www.creative-tim.com" class="simple-text">
                    诗词大王后台管理
                </a>
            </div>
            <ul class="nav">
                <li>
                    <a class="nav-link" href="./user.html">
                        <i class="nc-icon nc-circle-09"></i>
                        <p>编辑个人资料</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./table.html">
                        <i class="nc-icon nc-notes"></i>
                        <p>名句信息管理</p>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="./poetryManager.html">
                        <i class="nc-icon nc-pin-3"></i>
                        <p>诗词信息管理</p>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="./DynastyManager.html">
                        <i class="nc-icon nc-bell-55"></i>
                        <p>朝代管理</p>
                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="./KnowManager.html">
                        <i class="nc-icon nc-bell-55"></i>
                        <p>知识管理</p>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="./PoetsManag.html">
                        <i class="nc-icon nc-bell-55"></i>
                        <p>诗人管理</p>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="./AncientManager.html">
                        <i class="nc-icon nc-bell-55"></i>
                        <p>古籍管理</p>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="./IdiomManager.html">
                        <i class="nc-icon nc-bell-55"></i>
                        <p>成语管理</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-panel">
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg " color-on-scroll="500" id="personInfo">
            <div class="container-fluid">
                <a class="navbar-brand" href="#pablo"> 知识管理 </a>
                <button href="" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-bar burger-lines"></span>
                    <span class="navbar-toggler-bar burger-lines"></span>
                    <span class="navbar-toggler-bar burger-lines"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navigation">
                    <ul class="nav navbar-nav mr-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link" data-toggle="dropdown">
                                <i class="nc-icon nc-palette"></i>
                                <span class="d-lg-none">Dashboard</span>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="nc-icon nc-zoom-split"></i>
                                <span class="d-lg-block">&nbsp;Search</span>
                            </a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ml-auto">

                        <li class="nav-item">
                            <a class="nav-link" href="#pablo">
                                <span class="no-icon" @click="signOut">退出登录</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- End Navbar -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card strpied-tabled-with-hover">
                            <div class="card-header ">
                                <h4 class="card-title">添加知识</h4>
                                <p class="card-category">添加中国古诗中的有趣知识</p>
                            </div>

                            <!-- form 表单，添加管理-->
                            <div style="padding: 10px;" id="addKnows">
                                <form class="bs-example bs-example-form" method="post"  @submit.prevent="addKnow" >
                                    <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">标题
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                        <input type="text" class="form-control" placeholder="请输入知识的标题" name="title" v-model="know.title" >
                                    </div>
                                    <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">内容
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                        <input type="text" class="form-control" placeholder="请输入知识的相关内容" name="txt" v-model="know.txt">
                                    </div>
                                    <div class="text-center">
                                        <button type="submit" class="btn-default" style="width: 200px;color: orange">添加</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- 对知识的操作 -->
                    <div class="col-md-12" id="findKnow">
                        <div class="card card-plain table-plain-bg">
                            <div class="card-header ">
                                <h4 class="card-title">编辑知识</h4>
                                <p class="card-category">对知识的内容进行编辑</p>
                            </div>

                            <!-- 输入框 -->
                            <div class="container" >
                                <div class="input-group">
                                    <input id="search" type="text" class="form-control input-lg" placeholder="请输入查询内容"><span class="input-group-addon btn btn-primary" @click="searchKnow()"><i class="nc-icon nc-zoom-split"></i></span>
                                </div>
                            </div>

                            <div class="card-body table-full-width table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <th>标题</th>
                                    <th>内容</th>
                                    <th>操作</th>
                                    <th>操作</th>
                                    </thead>
                                    <tbody>
                                    <tr v-for="know in knows">
                                        <td v-text="know.title">卜算子·我住长江头</td>
                                        <td class="txt" v-html="know.txt">只愿君心似我心，定不负相思意</td>
                                        <td><button @click="update(know.id)" class="btn-success" style="color:#fff;" data-toggle="modal" data-target="#myModal">修改</button></td>
                                        <td><button @click="del(know.id)" class="btn-danger" style="color: white">删除</button></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <nav class="mt-3">
                                    <ul class="pagination pagination-sm  justify-content-center">
                                        <li class="page-item">
                                            <a class="page-link" aria-label="Previous" href="" @click.prevent="loadPage(pageinfo.prePage)">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">上一页</span>
                                            </a>
                                        </li>
                                        <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                                            <a class="page-link" href="" v-text="n" @click.prevent="loadPage(n)"
                                               :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                                        </li>
                                        <li class="page-item "><a class="page-link" href="">
                                            <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                                        </a></li>
                                        <li class="page-item">
                                            <a class="page-link" aria-label="Next" href="" @click.prevent="loadPage(pageinfo.nextPage)">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">下一页</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>

                            <!------->

                            <!-- 模态框（Modal） -->
                            <div class="modal fade col-sm-12" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="myModalLabel">
                                                知识修改
                                            </h4>
                                        </div>
                                        <form  method="post" id="form_data" @submit.prevent="ModifySuccess">
                                            <div class="form-group form-row" hidden="hidden">
                                                <label class="col-form-label">I&nbsp;&nbsp;&nbsp;D：</label>
                                                <input  type="text" id="id" class="form-control" name="id" v-model="updateKnow.id" >
                                            </div>
                                            <div class="form-group form-row">
                                                <label class="col-form-label">标&nbsp;&nbsp;&nbsp;题：</label>
                                                <input type="text" class="form-control" id="title" name="pTitle" v-model="updateKnow.title"/>
                                            </div>
                                            <div class="form-group form-row">
                                                <label class="col-form-label">内&nbsp;&nbsp;&nbsp;容：</label>
                                                <textarea type="text" class="form-control" id="pBody" name="body" v-model="updateKnow.txt"></textarea>
                                            </div>
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-default" style="color: orange;" data-dismiss="modal">取消</button>
                                                <button type="submit" class="btn btn-primary" style="color: green;">提交更改</button>
                                            </div>
                                        </form>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal -->
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!--  Google Maps Plugin    -->
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>-->
<!--  Chartist Plugin  -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!--  Notifications Plugin    -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<!--<script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.0 " type="text/javascript"></script>-->
<!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

    let m_person = new Vue({
        el:"#personInfo",
        data:{},
        methods:{
            // 退出登录
            signOut:function () {
                if (window.confirm("是否确认退出登录？？")){
                    axios({
                        url:"/user/signOut",
                        data:"GET"
                    }).then(function (r) {
                        location.href = "/login.html";
                    })
                }else {
                    return false;
                }
            }
        }
    })

    // 对知识进行添加
    let m_addKnows = new Vue({
        el:"#addKnows",
        data:{
            know:{
                title:'',
                txt:''
            }
        },
        methods:{
            addKnow:function () {
                axios({
                    url:"/know/addKnow",
                    method:"post",
                    data:this.know
                }).then(function (r) {
                    console.log(r.data)
                    if (r.data == "ok"){
                        alert("添加成功！！")
                        location.reload();
                    }else {
                        alert("添加失败")
                        location.reload();
                    }
                })
            }
        }
    })

    //对知识的操作
    let m_findKnow = new Vue({
        el:"#findKnow",
        data:{
            knows:[],
            pageinfo:{},
            updateKnow:{
                id:'',
                title:'',
                txt:''
            }
        },
        methods:{
            // 模糊查询
            searchKnow:function (pageNum) {
                let title = document.getElementById("search").value;
                console.log("获取到的搜索框的值: " + title);
                axios({
                    url:"/know/fuzzy/search/" + title,
                    method:"GET",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function (r) {
                    m_findKnow.knows = r.data.list
                    m_findKnow.pageinfo = r.data
                    if ($.isEmptyObject(r.data.list)){
                        alert("查询结果为空！！")
                    }
                }).then(function () {
                    /* 超过一个字数显示省略号 */
                    $(".txt").each(function () {
                        var str = $(this).html()
                        var st = str.replace(/<[^>]+>/g,"");
                        var substr = st.substring(0,30);
                        $(this).html(substr + (str.length>30 ? '...' : ''));
                    })
                })
            },
            // 分页显示
            loadPage:function (pageNum) {
                this.searchKnow(pageNum);
            },
            //删除
            del:function (event) {
                if (window.confirm("是否删除？")){
                    axios({
                        url:"/know/delete/"+event,
                        method:"get"
                    }).then(function () {
                        alert("删除成功！！")
                        //location.reload();
                        location.href="http://localhost:8080/admin/examples/KnowManager.html"
                    })
                }else {
                    return false;
                }
            },
            // 点击修改按钮,将值赋值到表格上
            update:function (event) {
                axios({
                    url:"/know/findOne/"+event,
                    method:"GET"
                }).then(function (r) {
                    console.log(r.data)
                    m_findKnow.updateKnow.id = r.data.id;
                    m_findKnow.updateKnow.title = r.data.title;
                    m_findKnow.updateKnow.txt = r.data.txt;
                })
            },
            // 修改内容
            ModifySuccess:function () {
                if (window.confirm("是否确定更新？？")){
                    axios({
                        url:"/know/update",
                        method:"POST",
                        data:this.updateKnow
                    }).then(function (r) {
                        if (r.data == 1){
                            alert("更新成功！！")
                            //location.reload();
                            location.href="http://localhost:8080/admin/examples/KnowManager.html"
                        }else {
                            alert("更新失败")
                            //location.reload();
                            location.href="http://localhost:8080/admin/examples/KnowManager.html"
                        }
                    })
                }else {
                   // location.reload()
                    location.href="http://localhost:8080/admin/examples/KnowManager.html"
                }
            }

        }
    })
</script>
</html>
